<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Ajax 动态刷新</title>
    <script src="{{ url_for('static',filename='js/jquery-3.3.1.js') }}"></script>
</head>
<body>
    <style>
        #show {
            background-color: red;
            color: white;
        }
    </style>
    <p id="show"></p>
    <script>
        $.ajax({
            url: 'http://127.0.0.1:5000/allusers',
            dataType: 'json',
            success: function (data) {
                console.log(data)
                $('#show').html(data.message)
            },
            error: function (jqXHR) {
                console.log(jqXHR)
            }
        })
    </script>

    <button id="search">查询</button>
    <ul id="lists"></ul>
    <script>
        var ul = $('#lists')
        $('#search').click(function () {
            $.ajax({
                url: 'http://127.0.0.1:5000/ds',
                dataType: 'json',
                data:{'un':'Pony Ma'},
                success:function (data) {
                    if (data){
                        for (var i = 0; i < data.datas.length;i++){
                            var item = data.datas[i]
                            var li = $('<li></li>')
                            var sn = $('<span></span>')
                            sn.html(item.sname)
                            var sage = $('<span></span>')
                            sage.html(item.age)
                            var btn = $('<button>编辑</button>')
                            btn.click(function () {
                                console.log(i)
                            })
                            li.append(sn)
                            li.append(sage)
                            li.append(btn)
                            ul.append(li)
                        }

                        $('#show').html($('#show').html() + data.user.un)

                    }
                },
                error:function (jqXHR) {
                    console.log(jqXHR)
                }
            })
        })
    </script>
</body>

</html>